<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>新闻管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody" sec:authorize="hasPermission('/admin/news/toNews',null)">
<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="newTable" lay-filter="newTable"></table>
    <div id="newToolBar" style="display: none;">
        <button type="button" lay-event="add" class="layui-btn layui-btn-sm" sec:authorize="hasPermission('/admin/news/addNews','new:add')">
            <span class="layui-icon layui-icon-add-1"></span>添加新闻
        </button>
    </div>

    <div id="newRowBar" style="display: none;">
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm" sec:authorize="hasPermission('/admin/news/updateNews','new:update')">
            <span class="layui-icon layui-icon-edit"></span>编辑
        </button>
        <button type="button" lay-event="viewImage" class="layui-btn layui-btn-sm layui-btn-green" sec:authorize="hasPermission('/admin/news/toNews',null)">
            <span class="layui-icon layui-icon-search"></span>查看大图
        </button>
        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger" sec:authorize="hasPermission('/admin/news/deleteNews','new:delete')">
            <span class="layui-icon layui-icon-delete"></span>删除
        </button>
    </div>
</div>

<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
    <form action="" method="post" class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md9 layui-col-xs7">
                    <div class="layui-form-item">
                        <label class="layui-form-label">新闻标题:</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="id">
                            <input type="text" name="title"  placeholder="请输入新闻标题" autocomplete="off" lay-verify="required"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示:</label>
                        <div class="layui-input-inline">
                            <input checked="" name="available" title="显示" type="radio" value="1">
                            <input name="available" title="不显示" type="radio" value="0">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-xs5">
                    <div class="layui-upload-list thumbBox mag0 magt3" id="newimgDiv">
                        <!-- 显示上传的图片 -->
                        <img class="layui-upload-img thumbImg" id="showNewImg">
                        <!-- 保存当前显示图片的地址 -->
                        <input type="hidden" name="image" id="image" lay-verify="required">
                    </div>
                </div>
            </div>
            <label class="layui-form-label">新闻内容</label>
            <div class="layui-input-block">
                <textarea name="content" placeholder="请输入新闻内容" class="layui-textarea" style="height: 300px"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
                <button type="reset" id="dataFrmResetBtn" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->


<!-- 查看大图弹出的层 开启 -->
<div id="viewNewImageDiv" style="display: none;text-align: center;">
    <img alt="新闻图片" id="view_newimg" width="550" height="350">
</div>
<!-- 查看大图弹出的层 结束 -->

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    var tableIns;
    layui.use(['jquery', 'form', 'table', 'layer','upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var upload=layui.upload;

        //加载 数据
        tableIns = table.render({
            elem: '#newTable'
            , url: '/admin/news/allNews'
            , toolbar: '#newToolBar' //开启头部工具栏，并为其绑定左侧模板
            , title: '新闻数据表'
            , page: true
            , cols: [ [
                {field: 'title', title: '标题', align: 'center', width: '250'}
                , {field: 'aname', title: '作者', align: 'center', width: '130'}
                , {field: 'image', title: '文章配图', align: 'center', width: '90',templet:function(d){
                        return "<img width=40 height=30 src=/admin/file/downloadShowFile?path="+d.image+" />";
                    }}
                , {field: 'time', title: '发布时间', align: 'center', width: '200'}
                , {
                    field: 'available', title: '是否显示', align: 'center', width: '90', templet: function (d) {
                        return d.available === 1 ? '<span style="color: blue">显示</span>' : '<span style="color: red">不显示</font>';
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#newRowBar', align: 'center', width: '300'}
            ] ]
        });
        //监听工具条的事件
        table.on("toolbar(newTable)", function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddLayer();
                    break;
            };
        });

        //监听行工具条的事件
        table.on("tool(newTable)", function (obj) {
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'update':
                    openUpdateNewLayer(data);
                    break;
                case 'viewImage':
                    showCarImage(data);
                    break;
                case 'delete':
                    deleteNew(data);
                    break;
            };
        });

        var mainIndex;
        var url;

        //打开添加的弹出层
        function openAddLayer() {
            mainIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['800px', '600px'],
                title: '添加新闻',
                success: function () {
                    $("#dataFrm")[0].reset();
                    $("#showNewImg").attr("src","")
                    $("#image").val("")
                    url = "/admin/news/addNews";
                }
            });
        }

        //打开修改的弹出层
        function openUpdateNewLayer(data) {
            mainIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['800px', '600px'],
                title: '修改新闻',
                success: function () {
                    form.val("dataFrm", data);
                    $("#showNewImg").attr("src","/admin/file/downloadShowFile?path="+data.image);
                    $("#image").val(data.image);
                    //装载新的数据
                    url = "/admin/news/updateNews";
                }
            });
        }

        form.on("submit(doSubmit)", function (data) {
            $.post(url, data.field, function (res) {
                if (res.code == 200) {
                    tableIns.reload();
                }
                layer.msg(res.msg);
                layer.close(mainIndex);
            })
            return false;
        })

        //删除
        function deleteNew(data) {
            layer.confirm('你确定要删除这个新闻吗?', {icon: 3, title: '提示'}, function (index) {
                $.post("/admin/news/deleteNews", {id: data.id}, function (res) {
                    if (res.code == 200) {
                        tableIns.reload();
                    }
                    layer.msg(res.msg);
                })
                layer.close(index);
            });
        }

        //查看大图
        function showCarImage(data){
            mainIndex=layer.open({
                type:1,
                title:'新闻图片',
                content:$("#viewNewImageDiv"),
                area:['800px','600px'],
                success:function(index){
                    $("#view_newimg").attr("src","/admin/file/downloadShowFile?path="+data.image);
                }
            });

        }

        //上传图片
        //上传缩略图
        upload.render({
            elem: '#newimgDiv',
            url: '/admin/file/uploadFile',
            method : "post",
            acceptMime:'image/*',
            field:"mf",
            done: function(res, index, upload){
                $('#showNewImg').attr('src',""+"/admin/file/downloadShowFile?path="+res.data.src);
                $('#image').val(res.data.src);
                $('#newimgDiv').css("background","#fff");
            }
        });
    });
</script>

</body>
</html>